<template>
  <div class="container">
    <XHeader></XHeader>
    <!-- 菜单模块 -->
    <div class="oneCenter">
      <!-- 左侧菜单 -->
      <div class="leftMenu">
        <div class="menuItem" @click="showAll" :class="{ active: active === '全部' }">
          <div>全部</div>
          <div>({{ totalNum }})</div>
        </div>
        <div class="menuItem" v-for="item in homeMenu" :class="{ active: active === item.titleName }" :key="item.name"
          @click="showChildren(item)">
          <div>{{ item.titleName }}</div>
          <div>({{ getOneListNum(item.children) }})</div>
        </div>
      </div>
      <!-- 右侧选项 -->
      <div class="rightContent">
        <div v-for="oneTitle in centerList" :key="oneTitle.titleName">
          <div v-for="twoItem in oneTitle.children" :key="twoItem.titleName">
            <div class="parentItem">{{ twoItem.titleName }}</div>
            <span class="childItem" v-for="child in twoItem.children" :key="child.name"
              @click="getData(oneTitle.titleName, twoItem.titleName, child)">{{
                child.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片展示模块 -->
    <div class="twoCenter" v-if="activeTwoMenu == ''">
      <div class="classBox">
        <div class="itemCard" v-for="child in centerList.flatMap(i =>
          i.children.flatMap(item => item.children.map(child => ({ ...child, parentItem: item, parentI: i }))))"
          :key="child.name" @click="getData(child.parentI.titleName, child.parentItem.titleName, child)">
          <div class="listImgContent">
            <!-- this.src='/default.webp' -->
            <img :src="showResult_imagesIng(child)" @error="setDefaultImage" alt="">
          </div>
          <div class="imgTitle">{{ child.parentItem.titleName + "-" + child.name }}</div>
        </div>
        <div class="itemCard" v-for="i in 4" :key="i"></div>
      </div>
    </div>
    <!-- 详情展示模块 -->
    <div class="threeCenter" v-else>
      <!-- 教程文档 -->
      <div class="showAllImage" @click="showAllImage">
        <SvgIcon :svg="svgReturn" size="24" color="#000" />
        &nbsp;
        查看全部列表
      </div>
      <div class="title">{{ activeOneMenu + "-" + activeTwoMenu + "-" + activethreeMenu }}
        <div class="Document" @click="goToDocument">教程文档</div>
      </div>
      <!-- 数据参数 -->
      <div class="dataParams">
        数据参数:
      </div>
      <div class="showXLSX" v-if="excelFilePath.length > 0">
        <div v-for="item in excelFilePath" :key="item.path">
          <XlsxViewer :file-path="BASE_URL + '/' + item.path"></XlsxViewer>
        </div>
      </div>
      <div class="dataParams">
        主要结果:
      </div>
      <div class="imgContent" v-for="img in resultImgPath" :key="img.path">
        <img :src="BASE_URL + '/' + img.path" alt="">
      </div>

      <div v-if="resultImgPath.length == 0" class="imgError">
        <div class="error-message">
          <span class="error-icon">⚠️</span>
          暂无图片
        </div>
      </div>
      <!-- <div class="dataParams">
        数据参数:
      </div> -->
      <div class="canshuImg" v-for="img in paramImgPath" :key="img.path">
        <img :src="BASE_URL + '/' + img.path" alt="">
      </div>
      <div class="dataParams">
        代码展示:
      </div>
      <div class="showMd" v-for="item in mdFilePath" :key="item.path">
        <MdViewer :file-path="BASE_URL + '/' + item.path"></MdViewer>
      </div>
      <div class="dataParams">
        飞书链接：<br>
      </div>
      <div class="feishuUrl">
        <a :href="feishuUrl" target="_blank">{{ feishuUrl }}</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted } from "vue";
// import homeMenu from "@/assets/data/homeMenu.json";
import XlsxViewer from './components/XlsxViewer.vue';
import MdViewer from './components/MdViewer.vue';
import { getInformationList, getTreeList } from '@/api/index.js';
import { BASE_URL } from '@/utils/zongIp.js'// 静态资源IP地址
import defaultImage from '@/assets/default.webp';

const homeMenu = ref([[], []]);
// 导入本地svg图标
import svgReturn from '@/assets/svg/return.svg?raw';
const active = ref("基础绘图");
const activeOneMenu = ref("基础绘图");
const activeTwoMenu = ref("");
const activethreeMenu = ref("分组比较图");

const pdfPath = ref("");
const excelFilePath = ref([]);
const resultImgPath = ref([]);// 主要结果
const paramImgPath = ref([]);// 主要参数
const mdFilePath = ref('');
const feishuUrl = ref('')
// 需要展示的东西
const show = ref({
  xlsx: true,
  md: true
});
/** 总数 */
const totalNum = ref(0);
/** 计算总数 */
const getTotalNum = (homeMenu) => {
  totalNum.value = 0;
  homeMenu.forEach(item => {
    if (item.children) {
      item.children.forEach(child => {
        totalNum.value += child.children.length;
      })
    }
  })
}
const getOneListNum = (oneItem) => {
  if (!oneItem) {
    return 0;
  }
  let num = 0;
  oneItem.forEach(item => {
    num += item.children.length
  })
  return num;
}
const showAll = () => {
  active.value = "全部";
  centerList.value = []
  centerList.value = homeMenu.value
}
const centerList = ref([]);

// 展示pdf
const goToDocument = () => {
  // 使用window.open在新窗口打开PDF
  window.open(BASE_URL + '/' + pdfPath.value, '_blank');
}
const showChildren = (item) => {
  centerList.value = [item];
  active.value = item.titleName;
}
// 展示详情
const getData = (onetitle, twoTitle, itemData) => {
  // 如果已经是当前项，则不进行任何操作
  if (activeOneMenu.value === onetitle && activeTwoMenu.value === twoTitle && activethreeMenu.value === itemData.name) {
    return;
  }
  // 隐藏所有内容
  show.value.xlsx = false;
  show.value.md = false;
  activeOneMenu.value = onetitle;
  activeTwoMenu.value = twoTitle;
  activethreeMenu.value = itemData.name;
  feishuUrl.value = itemData.feishu_link;
  pdfPath.value = JSON.parse(itemData.pdf_path)[0].path;
  excelFilePath.value = JSON.parse(itemData.excel_files);

  resultImgPath.value = JSON.parse(itemData.result_images);
  paramImgPath.value = JSON.parse(itemData.param_images);
  mdFilePath.value = JSON.parse(itemData.md_code);
  setTimeout(() => {
    show.value.xlsx = true;
    show.value.md = true;
  }, 0);
}

// 展示全部
const showAllImage = () => {
  activeTwoMenu.value = '';
  showAll()
}
const initData = async () => {
  let treeList = [];
  const TreeData = await getTreeList()
  if (TreeData.code) {
    treeList = TreeData.data;
    const res = await getInformationList({})
    if (res.code) {
      res.data.list.forEach(item => {
        let titlePath = JSON.parse(item.titlePath);
        item.name = titlePath[2];
        treeList.forEach((treeItem, index) => {
          if (treeItem.id == titlePath[0]) {
            treeItem.children.forEach((oneItem, oneIndex) => {
              treeList[index].children[oneIndex].name = oneItem.titleName;
              if (oneItem.id === titlePath[1]) {
                treeList[index].children[oneIndex].children.push(item)
              }
            })
          }
        })
      })
      homeMenu.value = treeList;
      getTotalNum(treeList);
      showAll()
    }
  }
}
const setDefaultImage =(e)=>{
  console.log(e);
  e.target.src = defaultImage
}
const showResult_imagesIng=(item)=>{
  let data = JSON.parse(item.result_images);
  if(data.length>0){
    return BASE_URL + '/' + data[0].path
  }
  return defaultImage
}
onBeforeMount(() => {
  initData()
})
onMounted(() => {
})
</script>

<style scoped lang="scss">
.container {
  .oneCenter {
    height: 410px;
    display: flex;
    background-color: #fff;

    .leftMenu {
      width: 300px;
      height: 100%;
      background-color: #eee;

      .menuItem {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        cursor: pointer;
      }

      .active {
        background-color: #fff;
        color: #ff6a00;
      }
    }

    .rightContent {
      flex: 1;
      height: 100%;
      overflow-y: auto;

      .parentItem {
        margin: 10px;
        padding: 5px;
        font-weight: 700;
        cursor: default;
      }

      .childItem {
        padding: 10px 15px;
        margin: 0 10px;
        font-weight: 400;
        display: inline-block;
        cursor: pointer;
        border-radius: 10px;

        &:hover {
          color: #ff6a00;
          background-color: #fff7f3;
        }
      }
    }
  }

  .twoCenter {
    margin-top: 10px;

    .classBox {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;

      .itemCard {
        text-align: center;
        width: 200px;
        display: flex;
        flex-direction: column;
        margin: 5px;
        cursor: pointer;

        .listImgContent {
          width: 200px;
          height: 200px;

          img {
            width: 100%;
            height: 100%;
            box-shadow: 1px 1px 5px #ccc;
            border-radius: 5px;
          }
        }

        .imgTitle {
          margin-top: 5px;
          font-size: 13px;
        }
      }
    }
  }

  .threeCenter {
    background-color: #fff;

    // padding-bottom: 50px;
    // margin-bottom: -50px;
    .showAllImage {
      margin-top: 20px;
      padding: 15px;
      padding-bottom: 0px;
      display: flex;
      align-items: center;
      cursor: pointer;
      // 宽度根据文字宽度自适应
      width: fit-content;

    }

    .title {
      // background-color: #aaa;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      font-weight: 700;
      margin-left: 50px;

      .Document {
        color: #ff6a00;
        cursor: pointer;
      }
    }


    .dataParams {
      padding: 10px;
      font-weight: 700;
      display: flex;
      justify-content: space-between;
      background-color: #f19f55;
      border-radius: 15px 15px 0 0;
      color: #fff;
    }

    .imgError {
      max-width: 100%;
      border: 1px solid #e0e0e0;
      border-radius: 0 0 8px 8px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .content {
      padding: 10px;
      text-align: right;
    }


    .showXLSX {
      // margin-top: -35px;
      padding-bottom: 12px;
    }

    .imgContent {
      height: 500px;
      width: 100%;
      text-align: center;
      margin: 20px auto;

      img {
        // height: 100%;
        // width: 100%;
        max-height: 100%;
        max-width: 100%;
      }
    }

    .canshuImg {
      width: 100%;
      text-align: center;
      margin: 20px auto;

      img {
        width: 100%;
      }
    }

    .showMd {
      margin-bottom: 20px;
    }

    .feishuUrl {
      margin: 0px 20px 30px 20px;
      padding: 30px 0px;
      text-align: center;
      font-weight: 700;
      width: calc(100% - 100px);
      cursor: pointer;
      text-decoration: underline;
      color: #666;

    }
  }
}
</style>